import React, {useState, useEffect, useRef} from 'react';
import {motion, AnimatePresence} from 'framer-motion';
import {Heart, Music, Sparkles, Flower2, Star, Moon, Sun} from 'lucide-react';

const RomanticFireworks = () => {
    const [particles, setParticles] = useState([]);
    const [romanticQuotes] = useState([
        "你是我夜空中绚烂的烟花。",
        "爱是一个灵魂居住在两个身体里。",
        "你身体里的每一个原子，我都像珍视自己一样珍视。",
        "和我一起慢慢变老，最美好的尚未到来。"
    ]);
    const [currentQuote, setCurrentQuote] = useState(0);
    const [isPlaying, setIsPlaying] = useState(false);
    const [animationIntensity, setAnimationIntensity] = useState(50);
    const [isDarkMode, setIsDarkMode] = useState(false);
    const canvasRef = useRef(null);
    const audioRef = useRef(null);
    const boomRef = useRef(null);

    const colors = ['#FFB6C1', '#FF69B4', '#FF1493', '#E6B8FF', '#FF8C00'];

    const createParticle = (x, y) => {
        const angle = Math.random() * Math.PI * 2;
        const velocity = (1 + Math.random() * 2) * (animationIntensity / 50);
        const size = 3 + Math.random() * 20;
        const lifetime = 100 + Math.random() * 50;

        return {
            x,
            y,
            vx: Math.cos(angle) * velocity,
            vy: Math.sin(angle) * velocity,
            size,
            color: colors[Math.floor(Math.random() * colors.length)],
            lifetime,
            age: 0
        };
    };

    const createHeart = (x, y) => {
        const newParticles = [];
        const particleCount = Math.floor(30 * (animationIntensity / 50));

        for (let i = 0; i < particleCount; i++) {
            newParticles.push(createParticle(x, y));
        }
        setParticles(prev => [...prev, ...newParticles]);
    };

    const handleClick = (e) => {
        const rect = e.currentTarget.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        createHeart(x, y);

        setCurrentQuote((prev) => (prev + 1) % romanticQuotes.length);

        if (boomRef.current) {
            boomRef.current.play();
        }
        if (!isPlaying) {
            setIsPlaying(true);
            audioRef.current.play();
        }
    };

    const updateParticles = () => {
        setParticles(prev =>
            prev
                .map(p => ({
                    ...p,
                    x: p.x + p.vx,
                    y: p.y + p.vy,
                    vy: p.vy + 0.05,
                    age: p.age + 1,
                    size: p.size * 0.99
                }))
                .filter(p => p.age < p.lifetime)
        );
    };

    useEffect(() => {
        const interval = setInterval(updateParticles, 16);
        return () => clearInterval(interval);
    }, []);

    useEffect(() => {
        const timer = setTimeout(() => {
            createHeart(window.innerWidth / 2, window.innerHeight / 2);
        }, 500);

        return () => clearTimeout(timer);
    }, []);

    const toggleMusic = (e) => {
        e.stopPropagation()
        setIsPlaying(!isPlaying);
        if (!isPlaying && audioRef.current) {
            audioRef.current.play();
        } else if (audioRef.current) {
            audioRef.current.pause();
        }
    };

    const toggleTheme = (e) => {
        e.stopPropagation()
        setIsDarkMode(!isDarkMode);
    };

    return (
        <div
            className={`relative w-full h-screen overflow-hidden ${isDarkMode ? 'bg-gradient-to-br from-purple-900 to-pink-900' : 'bg-gradient-to-br from-pink-200 to-purple-300'} font-sans transition-colors duration-500`}
            onClick={handleClick}
        >
            <audio ref={audioRef} src="/music.mp3" loop/>
            <audio ref={boomRef} src="/boom.mp3"/>

            {/* Decorative elements */}
            <motion.div
                className="absolute top-1/4 left-1/4 text-pink-500"
                animate={{
                    y: [0, -20, 0],
                    rotate: [0, 5, -5, 0]
                }}
                transition={{
                    duration: 8,
                    repeat: Infinity,
                    repeatType: 'reverse'
                }}
            >
                <Flower2 size={48}/>
            </motion.div>

            <motion.div
                className="absolute top-1/3 right-1/4 text-purple-500"
                animate={{
                    y: [0, -15, 0],
                    rotate: [0, -5, 5, 0]
                }}
                transition={{
                    duration: 7,
                    repeat: Infinity,
                    repeatType: 'reverse',
                    delay: 1
                }}
            >
                <Star size={40}/>
            </motion.div>

            {/* Main content */}
            <div className="absolute inset-0 flex flex-col items-center justify-center z-10 pointer-events-none">
                <motion.h1
                    className={`text-5xl md:text-6xl font-bold mb-6 ${isDarkMode ? 'text-pink-300' : 'text-pink-700'} font-pattaya`}
                    initial={{opacity: 0, y: -20}}
                    animate={{opacity: 1, y: 0}}
                    transition={{duration: 1}}
                >
                    空气中弥漫着爱
                </motion.h1>

                <motion.p
                    className={`text-2xl md:text-3xl italic text-center max-w-2xl px-4 ${isDarkMode ? 'text-pink-200' : 'text-pink-800'} font-playball`}
                    initial={{opacity: 0}}
                    animate={{opacity: 1}}
                    transition={{delay: 0.1, duration: 0.1}}
                    key={currentQuote}
                >
                    {romanticQuotes[currentQuote]}
                </motion.p>

                <motion.p
                    className={`mt-8 text-lg ${isDarkMode ? 'text-pink-300' : 'text-pink-700'}`}
                    initial={{opacity: 0}}
                    animate={{opacity: 1}}
                    transition={{delay: 1, duration: 1}}
                >
                    点击任意位置，开启魔法
                </motion.p>
            </div>

            {/* Controls */}
            <div className="absolute bottom-8 right-8 flex flex-col items-end gap-4 z-20">
                <motion.div
                    className={`p-3 rounded-full ${isDarkMode ? 'bg-white/20' : 'bg-white/30'} backdrop-blur-md pointer-events-auto`}
                    onClick={toggleTheme}
                    whileHover={{scale: 1.1}}
                    whileTap={{scale: 0.9}}
                >
                    {isDarkMode ? <Sun size={24} className="text-yellow-300"/> :
                        <Moon size={24} className="text-indigo-600"/>}
                </motion.div>

                <motion.div
                    className={`p-3 rounded-full  ${isDarkMode ? 'bg-white/20' : 'bg-white/30'} backdrop-blur-md pointer-events-auto`}
                    onClick={toggleMusic}
                    whileHover={{scale: 1.1}}
                    whileTap={{scale: 0.9}}
                >
                    <Music
                        className={`${isPlaying ? (isDarkMode ? 'text-pink-400' : 'text-pink-600') : (isDarkMode ? 'text-gray-400' : 'text-gray-600')}`}
                        size={24}/>
                </motion.div>

                <div onClick={(e) => e.stopPropagation()}
                     className={`p-3 rounded-2xl ${isDarkMode ? 'bg-white/20' : 'bg-white/30'} backdrop-blur-md w-32`}>
                    <label
                        className={`text-xs block mb-1 ${isDarkMode ? 'text-pink-200' : 'text-pink-700'}`}>动画强度</label>
                    <input
                        type="range"
                        min="10"
                        max="100"
                        value={animationIntensity}
                        onChange={(e) => setAnimationIntensity(e.target.value)}
                        className="w-full accent-pink-500"
                    />
                </div>
            </div>

            {/* Particles */}
            <div className="absolute inset-0 overflow-hidden">
                {particles.map((p, i) => (
                    // <motion.div>
                    <Heart key={i}
                           className="absolute rounded-full"
                           style={{
                               left: p.x,
                               top: p.y,
                               width: p.size,
                               height: p.size,
                               backgroundColor: p.color,
                               boxShadow: `0 0 ${p.size}px ${p.size / 2}px ${p.color}`
                           }}
                           initial={{opacity: 1}}
                           animate={{opacity: [1, 0.8, 0]}}
                           transition={{duration: p.lifetime / 100}}></Heart>
                    // </motion.div>
                ))}
            </div>

            {/* Footer */}
            <footer
                className={`absolute bottom-0 left-0 right-0 ${isDarkMode ? 'bg-black/30' : 'bg-white/10'} backdrop-blur-sm py-3 px-4 text-center text-sm ${isDarkMode ? 'text-pink-200' : 'text-pink-800'} border-t ${isDarkMode ? 'border-white/10' : 'border-white/20'}`}>
                <div>
                    created by <a target="_blank" href="https://gitee.com/JiaHuaWork"
                                  className={`${isDarkMode ? 'text-pink-300 hover:text-pink-200' : 'text-pink-600 hover:text-pink-500'}`}>巧克力哥哥</a>
                </div>
            </footer>
        </div>
    );
};

export default RomanticFireworks;